<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsjq增删改</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<style>
	*{
		padding: 0;
		margin: 0;
	}
	.a{
		width: 200px;
		height: 400px;
		background: pink;
		border:1px solid red;
	}
	.b{
		width: 100px;
		height: 100px;
		background: pink;
		border:1px solid yellow;
	}
	.c{
		width: 100px;
		height: 100px;
		background: pink;
		border:1px solid black;
	}
</style>
	<div class="a">
		<div class="b"></div>
	</div>
	<div class="c"></div>
	<button class="button1">append</button>
	<button class="button2">appendTo</button>
	<button class="button22">appendTo(CCC)</button>
	<button class="button3">prepend</button>
	<button class="button4">prependTo</button>
	<button class="button44">prependTo(CCC)</button>
	<button class="button5">after</button>
	<button class="button6">before</button>
	<button class="button7">insertAfter(CCC)</button>
	<button class="button8">insertBefore(CCC)</button>
	<button class="button9">empty</button>
	<button class="button10">remove</button>
</body>
<script>
	// 增加
	$(".button1").click(function(){
		$(".b").append("<p class='ok'>addend</p>");
		//append插入内部的后面
	})
	$(".button2").click(function(){
		$("<p>addendTo</p>").appendTo($(".b"));
		//appendTo插入内部的后面
	})
	$(".button22").click(function(){
		$(".c").appendTo($(".b"));
		//appendTo找到这个元素插入到内部的后面
	})
	$(".button3").click(function(){
		$(".b").prepend("<p>prepend</p>");
		//prepend插入内部的前面
	})
	$(".button4").click(function(){
		$("<p>prependTo</p>").prependTo($(".b"));
		//prependTo找到一个元素插入到内部的前面
	})
	$(".button44").click(function(){
		$(".c").prependTo($(".b"));
		//prependTo找到这个元素插入到内部的前面
	})
	$(".button5").click(function(){
		$(".b").after("<p>after</p>");
		//插入到外部的后面
	})
	$(".button6").click(function(){
		$(".b").before($("<p>before</p>"));
		//插入到外部的前面
	})
	$(".button7").click(function(){
		$(".c").insertAfter($(".b"));
		//找到这个元素，插入到外部的后面
	})
	$(".button8").click(function(){
		$(".c").insertBefore($(".b"));
		//找到这个元素，插入到外部的前面
	})
	// 删除
	$(".button9").click(function(){
		$(".ok").empty();
	})
	$(".button10").click(function(){
		$(".ok").remove();
	})
</script>
</html>